<back-to-top class="back_top" title="返回顶部"></back-to-top>
  <!-- Page Content -->
<div class="container">
    <p>码岛 - 商品 - 图书</p>
    <div class="row">
      <div class="col-md-4">
        <div class="bimg"><img src="{{vo.showimg}}"></div>
        <div class="simg">
          <span ng-repeat="(key, img) in detail.imgs"><img src="{{img}}" ng-click="vo.showimg=img"></span>
        </div>
      </div>
      <div class="col-md-8 h-main">
        <h4>{{detail.name}}</h4>
        <p class="t1">{{detail.title}}</p>
        <hr>
        <p class="t2">价  格：
          <span class="t2-1">{{detail.oldprice}}元</span>
          <span class="t2-2">{{detail.price}}元</span></p>
        <p class="t2" ng-if="detail.issize=='1'">
          规  格
          <div>
            
          </div>
        </p>
        <p class="t2">
          库  存： <span>{{detail.shcema}}件</span>
        </p>
        <p class="t2">运  费：<span>{{detail.yprice}}元</span></p>
        <p class="t3">
          购买数量: <input type="number" class="btn-10" ng-model="vo.number">
          <button class="btn btn-success btn-15"
          ng-click="buy()">购买</button>
        </p>
      </div>  
    </div>
    <br><br>
    <div class="row">
        <div class="col-md-12">
          <ul id="myTab" class="nav nav-tabs">
              <li class="active">
                  <a href="#t1" data-toggle="tab">
                      详情描述
                  </a>
              </li>
              <li>
                <a  href="#t2" data-toggle="tab">购买评论 <span class="badge">{{comment.num}}</span></a>
              </li>
          </ul>
          <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade in active" id="t1">
                  <div ng-bind-html="detail.desc | trustHtml"></div>
              </div>
              <div class="tab-pane fade" id="t2">
                  <div class="media" ng-repeat="(key, comment) in commentList">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" ng-src="{{comment.header}}">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">{{comment.nick}}</h4>
                      {{comment.content}}
                      <p class="right">{{comment.created | date:"yyyy-MM-dd"}}</p>
                    </div>
                    <hr>
                  </div>
              </div>
          </div>
        </div>
    </div>


    

</div>
<!-- /.container -->
<style type="text/css" media="screen">
  .bimg{
    margin:20px;
  }
  .bimg img{
    height: 350px;
  }
  .simg img:hover{
    border: 1px solid #990000;
  }
  .simg img{
    margin:8px;
    padding: 5px;
    width: 50px;
    height: 50px;
    border: 1px solid #eee;
  } 
  .h-main{
    padding-top: 10px;
  }
  .h-main h4{
    font-weight: bold;
  }
  .right{
    text-align: right;
  }
  .t1{
    color: #990000;
    font-size: 15px;
  }
  .t2{
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
  }
  .t2-1{
    text-decoration:line-through;
    font-size: 18px;
    color: #e4393c;
  }
  .t2-2{
    font-size: 20px;
    color: #e4393c;
  }
  .t2 span{
    padding-left: 10px;
    font-weight: 200;
  }
  .t3{
    padding: 40px 8px;
  }
  .media-heading {
    margin-top: 15px;
  }
</style>